import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './styles/globals.css'

// 导入自定义全局组件
import { 
  StatusNotification, 
  StatisticCard, 
  BlockchainActivity,
  LoadingAnimation
} from './components/GlobalComponents.vue'
import FloatingButtons from './components/FloatingButtons.vue'
import FloatingNotification from './components/FloatingNotification.vue'

// 解决 ResizeObserver 循环问题
const debounce = (fn, delay) => {
  let timer = null
  return (...args) => {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn(...args)
    }, delay)
  }
}

// 重写 ResizeObserver
const _ResizeObserver = window.ResizeObserver
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
  constructor(callback) {
    callback = debounce(callback, 20)
    super(callback)
  }
}

const app = createApp(App)

// 注册全局组件
app.component('StatusNotification', StatusNotification)
app.component('StatisticCard', StatisticCard)
app.component('BlockchainActivity', BlockchainActivity)
app.component('LoadingAnimation', LoadingAnimation)
app.component('FloatingButtons', FloatingButtons)
app.component('FloatingNotification', FloatingNotification)

// 添加全局属性
app.config.globalProperties.$blockchainStatus = {
  status: 'online',
  networkId: 'FISCO BCOS',
  blockHeight: 1024,
  lastUpdate: new Date()
}

// 模拟区块链活动数据
app.config.globalProperties.$blockchainActivities = [
  {
    id: 1,
    type: 'certificate',
    title: '颁发新证书',
    description: '为学生 Zhang San 颁发了本科学位证书',
    timestamp: new Date(Date.now() - 5 * 60000) // 5分钟前
  },
  {
    id: 2,
    type: 'revoke',
    title: '撤销证书',
    description: '撤销了证书ID为 10023 的证书',
    timestamp: new Date(Date.now() - 25 * 60000) // 25分钟前
  },
  {
    id: 3,
    type: 'student',
    title: '添加新学生',
    description: '添加了新学生 Li Si 到系统',
    timestamp: new Date(Date.now() - 120 * 60000) // 2小时前
  }
]

// 全局统计数据
app.config.globalProperties.$statistics = {
  studentCount: 128,
  certificateCount: 256,
  verificationCount: 512,
  successRate: '98.5%'
}

// 全局通知管理器
app.config.globalProperties.$notify = (options) => {
  const notificationContainer = document.getElementById('notification-container') || 
    (() => {
      const container = document.createElement('div')
      container.id = 'notification-container'
      document.body.appendChild(container)
      return container
    })()
  
  const notificationMount = document.createElement('div')
  notificationContainer.appendChild(notificationMount)
  
  const notification = createApp(FloatingNotification, {
    ...options,
    onClose: () => {
      setTimeout(() => {
        notification.unmount()
        notificationContainer.removeChild(notificationMount)
      }, 300)
      if (options.onClose) options.onClose()
    }
  })
  
  notification.mount(notificationMount)
  return {
    close: () => notificationMount.querySelector('.notification-close').click()
  }
}

// 处理全局错误，忽略ResizeObserver错误
window.addEventListener('error', (event) => {
  if (event.message && event.message.includes('ResizeObserver')) {
    event.stopPropagation();
    event.preventDefault();
  }
});

app.use(store).use(router).use(ElementPlus)
app.mount('#app')
